<template>
  <div class="FilingInfo">
    <h2 class="basic">基本信息</h2>
    <div class="main mt-40">
      <a-form-model
        ref="ruleForm"
        :rules="rules"
        :model="form"
        layout="vertical"
      >
        <!-- 基本信息 -->
        <a-row :gutter="[16, 2]">
          <a-col :span="8">
            <a-form-model-item label="统一社会信用代码">
              <a-input :disabled="true" v-model="companyInfo.code" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单位名称">
              <a-input :disabled="true" v-model="companyInfo.name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单位英文名称" prop="companyEnName">
              <a-input
                v-model="form.companyEnName"
                placeholder="单位英文名称"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单位登记注册类型" prop="registType">
              <!-- <a-input v-model="form.registType" placeholder="单位登记注册类型" /> -->
              <a-select
                v-model="form.registType"
                placeholder="请选择单位登记注册类型"
              >
                <a-select-option
                  v-for="item in registrationType"
                  :key="item.dictValue"
                  :value="item.dictValue"
                  >{{ item.dictLabel }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="注册时间" prop="registDate">
              <a-date-picker
                v-model="form.registDate"
                valueFormat="YYYY-MM-DD"
                format="YYYY-MM-DD"
                placeholder="请选择注册时间"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="营业期限" prop="bussinessTerm">
              <!-- <a-date-picker v-model="form.bussinessTerm" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD"
                                placeholder="请选择证书有效期" style="width: 100%;" /> -->
              <a-range-picker
                format="YYYY-MM-DD"
                v-model="form.bussinessTerm"
                @change="timeSelect"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="注册所在地" prop="registLocation">
              <a-input
                v-model="form.registLocation"
                placeholder="请输入注册所在地"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="注册所在街道" prop="registStreet">
              <a-input
                v-model="form.registStreet"
                placeholder="请输入注册所在街道"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单位住所" prop="registAddress">
              <a-input
                v-model="form.registAddress"
                placeholder="请输入注册所在街道"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="办公所在区" prop="officeLocation">
              <a-input
                v-model="form.officeLocation"
                placeholder="请输入办公所在区"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="办公所在街道" prop="officeStreet">
              <a-input
                v-model="form.officeStreet"
                placeholder="请输入办公所在街道"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="办公地址" prop="officeAddress">
              <a-input
                v-model="form.officeAddress"
                placeholder="请输入办公地址"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="生产所在区" prop="prodLocation">
              <a-input
                v-model="form.prodLocation"
                placeholder="请输入生产所在区"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="生产所在街道" prop="prodStreet">
              <a-input
                v-model="form.prodStreet"
                placeholder="请输入生产所在街道"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="生产地址" prop="prodAddress">
              <a-input
                v-model="form.prodAddress"
                placeholder="请输入生产地址"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="单位电话" prop="tel">
              <a-input v-model="form.tel" placeholder="请输入单位电话" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="电子邮箱" prop="email">
              <a-input v-model="form.email" placeholder="请输入电子邮箱" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单位网址" prop="website">
              <a-input v-model="form.website" placeholder="请输入单位网址" />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="传统行业类别" prop="categories">
              <!-- <a-input v-model="form.categories" placeholder="请输入传统行业类别" /> -->
              <a-select
                v-model="form.categories"
                placeholder="请输入传统行业类别"
              >
                <a-select-option
                  v-for="item in traditionalCategory"
                  :key="item.dictValue"
                  :value="item.dictValue"
                  >{{ item.dictLabel }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="高薪技术领域" prop="technical">
              <!-- <a-input v-model="form.technical" placeholder="请输入高薪技术领域" /> -->
              <a-select
                v-model="form.technical"
                placeholder="请输入高薪技术领域"
              >
                <a-select-option
                  v-for="item in technicalCategory"
                  :key="item.dictValue"
                  :value="item.dictValue"
                  >{{ item.dictLabel }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 2]">
          <a-col :span="24">
            <a-form-model-item label="单位经营范围" prop="businessScope">
              <a-textarea
                :rows="4"
                type="textarea"
                :maxLength="200"
                v-model="form.businessScope"
                placeholder="请输入单位经营范围"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              label="单位主营产品(只写品名)"
              prop="mainProduct"
            >
              <a-textarea
                :rows="4"
                type="textarea"
                :maxLength="200"
                v-model="form.mainProduct"
                placeholder="请输入单位主营产品(只写品名)"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <!-- 产业领域 -->
        <div class="children">
          <a-icon class="icon" type="tag" theme="filled" />
          <h2 class="subTitle">产业领域</h2>
        </div>
        <a-row class="childrenCheckbox">
          <a-form-model-item>
            <a-checkbox-group
              v-model="sectorArr"
              @change="onChangeSector"
              style="width: 100%"
            >
              <h3 class="childrenTitle">行业类别</h3>
              <a-row :gutter="[16, 16]">
                <a-col
                  :span="4"
                  v-for="item in industryCategory"
                  :key="item.dictValue"
                >
                  <a-checkbox :value="item.dictValue">
                    {{ item.dictLabel }}
                  </a-checkbox>
                </a-col>
              </a-row>
              <h3 class="childrenTitle">企业规模</h3>
              <a-row :gutter="[16, 16]">
                <a-col
                  :span="4"
                  v-for="item in strategicCategory"
                  :key="item.dictValue"
                >
                  <a-checkbox :value="item.dictValue">
                    {{ item.dictLabel }}
                  </a-checkbox>
                </a-col>
              </a-row>
              <h3 class="childrenTitle">地域</h3>
              <a-row :gutter="[16, 16]">
                <a-col
                  :span="4"
                  v-for="item in futureCategory"
                  :key="item.dictValue"
                >
                  <a-checkbox :value="item.dictValue">
                    {{ item.dictLabel }}
                  </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-model-item>
        </a-row>

        <!-- 入驻园区或载体 -->
        <!-- <div class="children">
          <a-icon class="icon" type="tag" theme="filled" />
          <h2 class="subTitle">入驻园区或载体</h2>
          <a-button style="float: right" ghost type="primary" @click="addEnter">
            新增
          </a-button>
        </div> -->
        <!-- <a-row class="childrenCheckbox">
          <a-table
            :columns="tbCol"
            :data-source="tbList"
            :rowKey="(record) => record.id"
            :pagination="false"
          >
            <div slot="type" slot-scope="text, record">
              {{ getTypeLabel(text) }}
            </div>
            <span slot="action" slot-scope="text, record">
              <a @click="deleEdit(record)" class="ml-24">
                <a-icon type="delete" theme="filled" />
              </a>
            </span>
          </a-table>
        </a-row> -->
      </a-form-model>
    </div>
    <div class="footer">
      <a-button type="primary" @click="onSubmit"> 保存 </a-button>
    </div>

    <!-- <a-modal
      title="入驻园区或载体"
      :visible="showModal"
      :footer="null"
      @cancel="cancelModal"
    >
      <EditEnter
        :enterCategory="enterCategory"
        :showModal="showModal"
        @cancel="cancelModal"
        @submit="submitEnter"
      />
    </a-modal> -->
  </div>
</template>
<script>
import { getCompaynInfo } from "@/apis/com/company";
import { getDicts } from "@/apis/system";
import { getCookiesUserInfo } from "@/utils/auth";
import router from "@/router";
import EditEnter from "./component/EditEnter.vue";
import { addFilingInfo, getFilingInfo } from "@/apis/com/filingInfo";
import { getFilingEnters } from "@/apis/com/fillingEnter";

export default {
  components: { EditEnter },

  data() {
    return {
      labelCol: { span: 2 },
      wrapperCol: { span: 16 },
      rules: {
        companyEnName: [
          { required: true, message: "请输入企业英文名称!", trigger: "blur" },
        ],
        registType: [
          {
            required: true,
            message: "请选择单位登记注册类型!",
            trigger: "blur",
          },
        ],
        registDate: [
          { required: true, message: "请选择注册时间!", trigger: "change" },
        ],
        bussinessTerm: [
          { type: "array", required: true, message: "请选择营业期限!" },
        ],
        registLocation: [
          { required: true, message: "请输入注册所在地!", trigger: "blur" },
        ],
        registStreet: [
          { required: true, message: "请输入注册所在街道!", trigger: "blur" },
        ],
        registAddress: [
          { required: true, message: "请输入注册地址!", trigger: "blur" },
        ],
        officeLocation: [
          { required: true, message: "请输入办公所在区!", trigger: "blur" },
        ],
        officeStreet: [
          { required: true, message: "请输入办公所在街道!", trigger: "blur" },
        ],
        officeAddress: [
          { required: true, message: "请输入办公地址!", trigger: "blur" },
        ],
        prodLocation: [
          { required: true, message: "请输入生产所在区!", trigger: "blur" },
        ],
        prodStreet: [
          { required: true, message: "请输入生产所在街道!", trigger: "blur" },
        ],
        prodAddress: [
          { required: true, message: "请输入生产地址!", trigger: "blur" },
        ],
        tel: [{ required: true, message: "请输入单位电话!", trigger: "blur" }],
        email: [
          { required: true, message: "请输入电子邮箱!", trigger: "blur" },
        ],
        website: [
          { required: true, message: "请输入单位网址!", trigger: "blur" },
        ],
        categories: [
          { required: true, message: "请选择传统行业类别!", trigger: "blur" },
        ],
        technical: [
          { required: true, message: "请输入高薪技术领域!", trigger: "blur" },
        ],
        mainProduct: [
          { required: true, message: "请输入主要产品!", trigger: "blur" },
        ],
      },
      form: {
        companyEnName: "",
        registType: undefined,
        registDate: "",
        bussinessTerm: [],
        bussinessTermStart: "",
        bussinessTermEnd: "",
        registLocation: "",
        registStreet: "",
        registAddress: "",
        officeLocation: "",
        officeStreet: "",
        officeAddress: "",
        prodLocation: "",
        prodStreet: "",
        prodAddress: "",
        tel: "",
        email: "",
        website: "",
        categories: undefined,
        technical: undefined,
        businessScope: "",
        mainProduct: "",

        sector: "",
        companyId: JSON.parse(getCookiesUserInfo()).companyId,
        comFilingEnters: [],
      },
      sectorArr: [],
      companyInfo: {},

      selectdCategorys: [],

      industryCategory: [],
      strategicCategory: [],
      futureCategory: [],

      enterCategory: [],
      traditionalCategory: [],
      technicalCategory: [],
      registrationType: [],

      tbCol: [
        {
          title: "序号",
          dataIndex: "idNum",
          width: 80,
          align: "center",
          customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
        },
        {
          title: "载体/园区类型",
          dataIndex: "type",
          align: "center",
          scopedSlots: { customRender: "type" },
          // customRender: function (text) {
          //     if (text == 1) {
          //         return "资质";
          //     } else if (text == 2) {
          //         return "荣誉";
          //     }
          // },
        },
        {
          title: "载体名称",
          dataIndex: "name",
          align: "center",
        },
        {
          title: "入驻时间",
          dataIndex: "entryDate",
          align: "center",
        },
        {
          title: "载体认证时间",
          dataIndex: "authDate",
          align: "center",
        },
        {
          title: "备注",
          dataIndex: "remark",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          fixed: "right",
          width: 200,
          scopedSlots: { customRender: "action" },
        },
      ],
      tbList: [],
      showModal: false,
    };
  },
  created() {
    // this.getCompaynInfo()
    // this.getIndustryCategory()
    // this.getStrategicCategory()
    // this.getFutureCategory()
    // this.getEnterCategory()
    // this.getTraditionalCategory()
    // this.getTechnicalCategory()
    // this.getRegistrationType()
    // this.getEnters()
    // this.getFilingDetails()

    this.init();
  },
  methods: {
    init() {
      // new PromiseAll
      this.$setLoading(true);
      Promise.all([
        this.getCompaynInfo(),
        this.getIndustryCategory(),
        this.getStrategicCategory(),
        this.getFutureCategory(),
        this.getEnterCategory(),
        this.getTraditionalCategory(),
        this.getTechnicalCategory(),
        this.getRegistrationType(),
        this.getEnters(),
        this.getFilingDetails(),
      ])
        .then(() => {
          console.log("全部请求成功");
          this.$setLoading(false);
        })
        .catch(() => {
          this.$setLoading(false);
        });
    },

    /**
     * 获取园区或载体信息
     */
    async getEnters() {
      const params = {
        companyId: this.form.companyId,
      };
      this.tbList = await getFilingEnters(params);
    },

    /**
     * 获取备案信息
     */
    async getFilingDetails() {
      const res = await getFilingInfo(this.form.companyId);
      if (res.code == 200) {
        if (res.data) {
          this.form = res.data;
        }
        this.sectorArr = res.data.sector.split(",");
        this.form.bussinessTerm = [
          this.form.bussinessTermStart,
          this.form.bussinessTermEnd,
        ];
        console.log("获取备案信息", this.form);
      }
    },

    /**
     * 获取企业注册类型
     */
    async getRegistrationType() {
      const { data } = await getDicts("enterprise_registration_types");
      console.log("获取传统行业类别", data);
      this.registrationType = data;
    },
    /**
     * 获取传统行业类别
     */
    async getTraditionalCategory() {
      const { data } = await getDicts("traditional_categories");
      console.log("获取传统行业类别", data);
      this.traditionalCategory = data;
    },

    /**
     * 获取高薪技术领域
     */
    async getTechnicalCategory() {
      const { data } = await getDicts("technology_categories");
      console.log("获取高薪技术领域", data);
      this.technicalCategory = data;
    },

    /**
     * 获取载体/园区类型
     */
    async getEnterCategory() {
      const { data } = await getDicts("com_enter_categories");
      console.log("获取载体/园区类型", data);
      this.enterCategory = data;
    },
    /**
     * 获取产业类别
     * @param type
     */
    async getIndustryCategory() {
      const { data } = await getDicts("industry_category");
      console.log("获取产业类别", data);
      this.industryCategory = data;
    },
    /**
     * 战略新兴产业类别
     * @param type
     */
    async getStrategicCategory() {
      const { data } = await getDicts("strategic_categories");
      console.log("战略新兴产业类别", data);
      this.strategicCategory = data;
    },
    /**
     * 未来产业类别
     * @param type
     */
    async getFutureCategory() {
      const { data } = await getDicts("future_categories");
      console.log("未来产业类别", data);
      this.futureCategory = data;
    },

    /**
     * 获取企业基本信息
     */
    getCompaynInfo() {
      const companyId = JSON.parse(getCookiesUserInfo()).companyId;
      getCompaynInfo(companyId)
        .then((res) => {
          if (res.code == 200) {
            this.companyInfo = res.data;
            this.form.registDate = this.companyInfo.incorporationDate;
            this.form.website = this.companyInfo.site;
            this.form.businessScope = this.companyInfo.natureBusiness;
          }
        })
        .catch({});
    },

    // 时间选择器
    timeSelect(date, dateStr) {
      this.form.bussinessTermStart = dateStr[0];
      this.form.bussinessTermEnd = dateStr[1];
    },
    getTypeLabel(text) {
      return this.enterCategory.find((item) => item.dictValue == text)
        .dictLabel;
    },
    onChangeSector(val) {
      this.sectorArr = val;
    },
    addEnter() {
      this.showModal = true;
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        console.log("备案信息Form", this.form);
        this.$setLoading(true);
        if (valid) {
          // 返回父组件form值
          // this.form.comFilingEnters = this.tbList;
          this.form.sector = this.sectorArr.join(",");

          addFilingInfo(this.form)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功");
              } else {
                this.$message.error("操作失败");
              }
              this.$setLoading(false);
            })
            .catch({});
        } else {
          console.log("error submit!!");
          this.$setLoading(false);
          return false;
        }
      });
    },
    cancelModal() {
      this.showModal = false;
    },
    submitEnter(item) {
      this.tbList.push({ ...item });
      this.showModal = false;
    },
    deleEdit(record) {
      console.log("record", record);
      this.tbList = this.tbList.filter((item) => item.id !== record.id);
    },
  },
};
</script>

<style lang="less" scoped>
.FilingInfo {
  padding: 21px 24px;
  background-color: #fff;
  border-radius: 4px;

  .basic {
    font-size: 22px;
    color: #303133;
    font-weight: 700;
    padding-bottom: 14px;
    border-bottom: solid 1px #e9e9e9;
  }

  .children {
    // display: flex;
    // // width: 100px;
    // align-items: center;
    // border-bottom: solid 1px #e9e9e9;
    // padding-bottom: 8px;
    padding-right: 40px;
    margin-bottom: 8px;

    .icon {
      color: rgb(227, 166, 71);
      font-size: 18px;
    }

    .subTitle {
      font-size: 18px;
      color: #303133;
      font-weight: 700;
      display: inline;
      margin-left: 20px;
    }
  }

  .childrenTitle {
    font-size: 16px;
    color: #303133;
    font-weight: 700;

    border-bottom: solid 1px #e9e9e9;
    padding: 8px 0;
    margin: 16px 0;
  }

  .childrenCheckbox {
    padding: 8px 38px;
  }

  .footer {
    padding: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>
